<template>
	<view class="content">
		<topMenu></topMenu>
		
		<view class="skms-content">
			<view class="skms-item" v-for="(item,index) in deviceListData">
				<text class="tit">{{item.mName}}</text>
				<view class="time-select">
					<view class="pullDown-box" @click="timeSelctIsFn(index)">
						<text class="time-lable">{{item.startTime}}</text>
						<image class="pullDown-img" src="../../static/img/pullDown.png" mode="aspectFit"></image>
					</view>
					<text>-</text>
					<view class="pullDown-box" @click="timeSelctIsFn(index)">
						<text class="time-lable">{{item.endTime}}</text>
						<image class="pullDown-img" src="../../static/img/pullDown.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<smh-time-range v-if="timeSelctIsShow" :time="defaultTime" @confrim="confrim" @cancel="cancel"></smh-time-range>
	<tab-bar ref="tabBar"></tab-bar>
	</view>
</template>

<script>
		import topMenu from '../../components/top-menu/top-menu.vue'
	    import {setTime,deviceList,switchMode} from "@/api/api.js";
	    export default {
	        components:{
	            topMenu
	        },
	        data() {
	            return {
					timeSelctIsShow:false,
					startTime:'',
					endTime:'',
					deviceListData:[],
					currentIndex:null,
					defaultTime:['00','00','0','00','00']
	            }
	        },  
			mounted() {
			 this.getDeviceList()
			},
	        methods: {
				timeSelctIsFn(index){
					this.timeSelctIsShow = true
					this.currentIndex = index
					let startTime = this.deviceListData[index].startTime
					let startTimeArr = startTime.split(':')
					let endTime = this.deviceListData[index].endTime
					let endTimeArr = endTime.split(':')
					this.defaultTime = [startTimeArr[0],startTimeArr[1],'0',endTimeArr[0],endTimeArr[1]]
				}, 
				//获取用户信息
				getDeviceList() {
					let param = {
						phone: "18793002958"
					}
					uni.showLoading({  title: '请稍后' });
					deviceList(param).then(res => { 
						if (res.code == 0 && res.data) { //有用户信息
							 console.log(res)
							 if(res.data.length>0){
								 uni.hideLoading();
								this.deviceListData = res.data
							 }
						} else { //无用户信息
							 
						}
					}).catch(res => { 
					 
					})
				},
	            confrim(e){ 
					let _this = this
					console.log(e.time)//确定事件 =>12:30-17:30
					let timeArr = e.time.split('-')

					this.deviceListData[_this.currentIndex].startTime = timeArr[0]
					this.deviceListData[_this.currentIndex].endTime = timeArr[1]
					let obj ={
						startTime:_this.deviceListData[_this.currentIndex].startTime,
						id:_this.deviceListData[_this.currentIndex].id,
						endTime:_this.deviceListData[_this.currentIndex].endTime
					} 
					setTime(obj).then(res => {
						if(res.code==0){
							uni.showToast({ title: res.msg, duration: 2000})
						}else{
							uni.showToast({ title: res.msg, duration: 2000})
						}
						
					})
					this.timeSelctIsShow = false
				},
				cancel(e){
					console.log(e.time)//取消事件 =>12:30-17:30
					this.timeSelctIsShow = false
				}
	        }
	    }
</script>

<style scoped lang="scss">
	.content{
		.skms-content{
			width: 90%;
			margin: 0 auto;
			border-top: 2px solid rgba(151, 151, 151, 1);
			.skms-item{
				margin-bottom: 40rpx;
				.tit{
					font-size: 36rpx;
					color: #333;
				}
				.time-select{
					display: flex;
					justify-content: space-between;
					.pullDown-box{
						width: 40%;
						padding: 16rpx 0;
						border-radius: 18px;
						background: rgba(238, 245, 255, 1);
						position: relative;
						text-align: center;
					}
					.time-lable{
						
					}
					.pullDown-img{
						position: absolute;
						width: 60rpx;
						height: 30rpx;
						right: 20rpx;
						top: 50%;
						margin-top: -15rpx;
					}
				}
			}
		}
	}
	
</style>
